<ng-container *ngIf="mode === 'mini'">
    <div class="music-box-container">
        <div class="music-mini" cdkDrag cdkDragBoundary="html">
            <div class="status">
                <mat-icon
                    (click)="switchStatus()"
                    [svgIcon]="status"
                ></mat-icon>
            </div>
            <div class="title one-line">
                <ng-container *ngIf="musicBox.current">
                    {{ musicBox.current.title }}
                </ng-container>
                <ng-container *ngIf="!musicBox.current">
                    {{ 'musicBox.placeholder' | translate }}
                </ng-container>
            </div>
            <div
                class="list"
                [class.active]="isOpenList"
                (click)="switchListBox()"
            >
                <mat-icon>sort</mat-icon>
            </div>

            <ul class="music-play-list" *ngIf="isOpenList">
                <li
                    class="music-play-item one-line"
                    [class.active]="isMatch(item)"
                    *ngFor="let item of musicBox.playList; let order = index"
                    (dblclick)="playNow(item)"
                >
                    {{ order }}.&nbsp;
                    {{ item.title }}
                </li>
            </ul>
        </div>
    </div>
</ng-container>

<ng-container *ngIf="mode === 'box'">
    <div class="music-box-container">
        <div class="music-box">
            <div class="status">
                <mat-icon
                    (click)="switchStatus()"
                    [svgIcon]="status"
                ></mat-icon>
            </div>
            <div class="title one-line">
                <ng-container *ngIf="musicBox.current">
                    {{ musicBox.current.title }}
                </ng-container>
                <ng-container *ngIf="!musicBox.current">
                    {{ 'musicBox.placeholder' | translate }}
                </ng-container>
            </div>
        </div>
    </div>
</ng-container>
